import React from 'react'
import { connect } from 'react-redux'
import { Dispatch, bindActionCreators } from 'redux'
import { RootState } from 'src/redux'
//ui
import { Card, Descriptions } from 'antd';
//comp
import WordNote from '../WordNote';
import WordTag from 'src/components/WordTag';
//ds
//redux
import { MainInfoState } from '../MainInfo/reducer';
import WordUserRelation from '../WordUserRelation';
import MainInfo from '../MainInfo';



export interface WordInfoProps {
    mainInfoState: MainInfoState
}

export const _WordInfo: React.SFC<WordInfoProps> = (props) => {
    const { mainInfoState } = props;

    const normalTSX = (
        <Descriptions size='small' bordered>
            <Descriptions.Item span={3} label={<div>单词</div>}>
                <MainInfo />
            </Descriptions.Item>
            <Descriptions.Item span={3} label="时态">
                <WordUserRelation />
            </Descriptions.Item>
            <Descriptions.Item span={3} label="标签">
                <WordTag />
            </Descriptions.Item>
            <Descriptions.Item span={3} label="笔记">
                <WordNote />
            </Descriptions.Item>
        </Descriptions>
    )
    let showTsx = (<div>请选择单词</div>)

    if (mainInfoState.word)
        showTsx = normalTSX

    return (
        <Card
            className="csc50"
            size='small'
            title='单词详情'
        >
            {showTsx}
        </Card>
    );
}

const mapStateToProps = (state: RootState) => ({
    mainInfoState: state.MainInfoState
})

const mapDispatchToProps = (dispatch: Dispatch) =>
    bindActionCreators({
    }, dispatch)

/**
 * 得到当前过滤器并渲染 Link。
 */
const WordInfo = connect(
    mapStateToProps,
    mapDispatchToProps
)(_WordInfo)

export default WordInfo